<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/sort.css">
    <title>分类</title>
</head>
<body>
    <!-- 头部模块开始 -->
    <header>
        <!-- 导航栏 -->
        <div class="nav-bar">            
            <nav class="nav-l">
                <!-- logo -->
                <div class="logo">
                    <a href="index.html" title="qq阅读"></a>
                </div>
                <ul class="tab">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="sort.html">分类</a></li>
                    <li><a href="rank.html">排行榜</a></li>
                    <li><a href="community.html">社区</a></li>
                </ul>
            </nav>
            <nav class="nav-r">
                <a href="login.html" class="login">登录</a></li>
                <a href="register.html" class="reg">免费注册</a></li>
                <!-- search -->
                <form action="#" method="post" class="search">
                    <input type="text" placeholder="请输入书籍名或作者名">
                    <a href="#" class="ssicon"><img src="./img/icon/sys.ico" class=""></a>
                </form>
            </nav>            
        </div>
    </header>
    <!-- 内容模块 -->
    <div class="sort-mian container">
        <!-- 菜单 -->
        <div class="tabs">
            <!-- 左边选项卡 -->
            <div class="tabs-h">
                <div class="tab-gender">
                    <div class="tab-gender-i active"><a href="#">男生</a></div>
                    <div class="tab-gender-i"><a href="#">女生</a></div>
                    <div class="tab-gender-i"><a href="#">出版</a></div>
                </div>
                <div class="tab-gender-content">
                    <!-- 男生 -->
                    <div class="tab-gender-m active"> 
                        <div class="fenlei">
                            <h3>分类</h3>
                            <ul>
                                <li><a href="#" class="active">全部</a></li>
                                <li><a href="#">玄幻</a></li>
                                <li><a href="#">奇幻</a></li>
                                <li><a href="#">武侠</a></li>
                            </ul>
                            <ul>
                                <li><a href="#">仙侠</a></li>
                                <li><a href="#">都市</a></li>
                                <li><a href="#">现实</a></li>
                                <li><a href="#">历史</a></li>
                            </ul>
                            <ul>
                                <li><a href="#">军事</a></li>
                                <li><a href="#">游戏</a></li>
                                <li><a href="#">悬疑</a></li>
                                <li><a href="#">科幻</a></li>
                            </ul>
                        </div>
                        <div class="fenlei">
                            <h3>状态</h3>
                            <ul>
                                <li><a href="#" class="active">全部</a></li>
                                <li><a href="#">连载中</a></li>
                                <li><a href="#">已完结</a></li>
                            </ul>
                        </div>
                        <div class="fenlei">
                            <h3>属性</h3>
                            <ul>
                                <li><a href="#" class="active">全部</a></li>
                                <li><a href="#">免费</a></li>
                                <li><a href="#">会员免费</a></li>
                                <li><a href="#">付费</a></li>
                            </ul>
                        </div>
                        <div class="fenlei">
                            <h3>更新时间</h3>
                            <ul>
                                <li><a href="#" class="active">全部</a></li>
                                <li><a href="#">3天内</a></li>
                                <li><a href="#">7天内</a></li>
                                <li><a href="#">15天内</a></li>
                                <li><a href="#">30天内</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="tab-gender-m">
                        <div class="fenlei">
                            <h3>分类</h3>
                            <ul>
                                <li><a href="#" class="active">全部</a></li>
                                <li><a href="#">古言</a></li>
                                <li><a href="#">现言</a></li>
                                <li><a href="#">仙侠</a></li>
                            </ul>
                            <ul>
                                <li><a href="#">青春</a></li>
                                <li><a href="#">游戏</a></li>
                                <li><a href="#">悬疑</a></li>
                                <li><a href="#">科幻</a></li>
                            </ul>
                        </div>
                        <div class="fenlei">
                            <h3>状态</h3>
                            <ul>
                                <li><a href="#" class="active">全部</a></li>
                                <li><a href="#">连载中</a></li>
                                <li><a href="#">已完结</a></li>
                            </ul>
                        </div>
                        <div class="fenlei">
                            <h3>属性</h3>
                            <ul>
                                <li><a href="#" class="active">全部</a></li>
                                <li><a href="#">免费</a></li>
                                <li><a href="#">会员免费</a></li>
                                <li><a href="#">付费</a></li>
                            </ul>
                        </div>
                        <div class="fenlei">
                            <h3>更新时间</h3>
                            <ul>
                                <li><a href="#" class="active">全部</a></li>
                                <li><a href="#">3天内</a></li>
                                <li><a href="#">7天内</a></li>
                                <li><a href="#">15天内</a></li>
                                <li><a href="#">30天内</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="tab-gender-m">
                        <div class="fenlei">
                            <h3>分类</h3>
                            <ul>
                                <li><a href="#" class="active">全部</a></li>
                                <li><a href="#">小说</a></li>
                                <li><a href="#">青春</a></li>
                                <li><a href="#">文学</a></li>
                            </ul>
                            <ul>
                                <li><a href="#">励志</a></li>
                                <li><a href="#">历史</a></li>
                                <li><a href="#">心理</a></li>
                                <li><a href="#">哲学</a></li>
                            </ul>
                            <ul>
                                <li><a href="#">文化</a></li>
                                <li><a href="#">医学</a></li>
                                <li><a href="#">养生</a></li>
                                <li><a href="#">科普</a></li>
                            </ul>
                        </div>
                        <div class="fenlei">
                            <h3>状态</h3>
                            <ul>
                                <li><a href="#" class="active">全部</a></li>
                                <li><a href="#">连载中</a></li>
                                <li><a href="#">已完结</a></li>
                            </ul>
                        </div>
                        <div class="fenlei">
                            <h3>属性</h3>
                            <ul>
                                <li><a href="#" class="active">全部</a></li>
                                <li><a href="#">免费</a></li>
                                <li><a href="#">会员免费</a></li>
                                <li><a href="#">付费</a></li>
                            </ul>
                        </div>
                        <div class="fenlei">
                            <h3>更新时间</h3>
                            <ul>
                                <li><a href="#" class="active">全部</a></li>
                                <li><a href="#">3天内</a></li>
                                <li><a href="#">7天内</a></li>
                                <li><a href="#">15天内</a></li>
                                <li><a href="#">30天内</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                
            </div>
            <!-- 书本内容 -->
            <div class="tabs-content">
                <!-- 书本选项卡 -->
                <div class="con-t">
                    <a href="#" class="active">人气</a>
                    <a href="#">收藏</a>
                    <a href="#">畅销</a>
                    <a href="#">更新</a>
                </div>
                <!-- 人气 -->
                <div class="con-m active">
                    <!-- 书本 -->
                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/nanbook01.jpg" class="book" alt="万古神帝">
                            <div class="content">
                                <h4 class="title">万古神帝</h4>
                                <p class="intro">
                                    天地初开，太古混乱。灵长之战后，时空人祖、九巫、始佛、幽冥、大魔神相继出世，开创道法，威临八方，众生朝迎，世人尊为始祖。天尊无敌当世，始祖名传古今。但，皆不可得长生………………张若尘自逆境中崛起，从平凡中非凡，在这一条满是英才、妖魔、美人的长生路上，走出一个崭新的大世。
                                </p>
                                <p class="other">
                                    飞天鱼
                                    <span>·连载</span>
                                    <span>·1442万字</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/nanbook02.jpg" class="book" alt="赤心巡天">
                            <div class="content">
                                <h4 class="title">赤心巡天</h4>
                                <p class="intro">
                                    （《赤心巡天》实体书已在全网发售。）上古时代，妖族绝迹。近古时代，龙族消失。神道大昌的时代已经如烟，飞剑绝巅的时代终究沉沦……这个世界发生了什么？那埋葬于时间长河里的历史真相，谁来聆听？山河千里写伏尸，乾坤百年描饿虎。天地至公如无情，我有赤心一颗、以巡天！——————欢迎来到，情何以甚的仙侠世界。
                                </p>
                                <p class="other">
                                    情何以甚
                                    <span>·连载</span>
                                    <span>·822万字</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/nanbook03.jpg" class="book" alt="万相之王">
                            <div class="content">
                                <h4 class="title">万相之王</h4>
                                <p class="intro">
                                    天地间，有万相。而我李洛，终将成为这万相之王。继《斗破苍穹》《武动乾坤》《大主宰》《元尊》之后，天蚕土豆又一部玄幻力作。
                                </p>
                                <p class="other">
                                    天蚕土豆
                                    <span>·连载</span>
                                    <span>·338万字</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/nanbook04.jpg" class="book" alt="黄昏分界">
                            <div class="content">
                                <h4 class="title">黄昏分界</h4>
                                <p class="intro">
                                    黄昏为界，阴阳二分。当邪神的血肉从大地的裂隙里拥挤了出来，当山脉一样的血肉出现在了各个地方。有人恐惧，有人膜拜，有人烧香上供。也有人尝了尝，咦，味道不错？于是，血肉变成了庄稼，人们贪婪的收割，争夺，走鬼问灵拜祖宗。胡麻自恐惧之中转生而来，食太岁，养火炉，历尽艰辛，与遍地的邪祟争命求活，然后…………什么？我才是邪祟？
                                </p>
                                <p class="other">
                                    黑山老鬼
                                    <span>·连载</span>
                                    <span>·190万字</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/nanbook05.jpg" class="book" alt="妖龙古帝">
                            <div class="content">
                                <h4 class="title">妖龙古帝</h4>
                                <p class="intro">
                                    妖龙古帝苏寒，曾经执掌圣域，镇压一世，为银河星系之巅！却因融合各大修为层次，走火入魔，形神俱灭。手下叛变，挚爱沉睡，好友被追杀！重活一世，定当卷土重来，逆转乾坤，杀尽一切叛变之人！                            </p>
                                <p class="other">
                                    遥望南山
                                    <span>·连载</span>
                                    <span>·1407万字</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/nanbook06.jpg" class="book" alt="神剑无敌">
                            <div class="content">
                                <h4 class="title">神剑无敌</h4>
                                <p class="intro">
                                    何谓无敌？许多剑神穷其一生，都难以修炼出一种至强剑意，杨小天却修炼出了十五种！百万年来，没有人能修炼出混元天命，杨小天却修炼出了十五条混元天命！千万年来，没人能修炼出鸿蒙圣果，杨小天却修炼出了十五枚鸿蒙圣果！亘古岁月，只有天地主宰才修炼出了永恒神体，杨小天却修炼出了永恒神体，混元天命神体，鸿蒙神体……（已完本《黄龙真人异界游》、《天尊重生》、《无敌天下》等）
                                </p>
                                <p class="other">
                                    神见
                                    <span>·连载</span>
                                    <span>·333万字</span>
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- 收藏 -->
                <div class="con-m">
                    <!-- 书本 -->
                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/shoucang01.jpg" class="book" alt="都市捉妖人">
                            <div class="content">
                                <h4 class="title">都市捉妖人</h4>
                                <p class="intro">
                                    叶少阳勇闯都市，与人斗，与魔斗，与魅妖美狐斗。不死真神，四方冥寇。新书《茅山神婿》已发，原滋原味，欢迎到“起点读书”阅读。
                                </p>
                                <p class="other">
                                   青子
                                    <span>·完结</span>
                                    <span>·733万字</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/shoucang02.jpg" class="book" alt="斗罗大陆">
                            <div class="content">
                                <h4 class="title">斗罗大陆</h4>
                                <p class="intro">
                                    唐门外门弟子唐三，因偷学内门绝学为唐门所不容，跳崖明志时却发现没有死，反而以另外一个身份来到了另一个世界，一个属于武魂的世界，名叫斗罗大陆。这里没有魔法，没有斗气，没有武术，却有神奇的武魂。这里的每个人，在自己六岁的时候，都会在武魂殿中令武魂觉醒。武魂有动物，有植物，有器物，武魂可以辅助人们的日常生活。而其中一些特别出色的武魂却可以用来修炼并进行战斗，这个职业，是斗罗大陆上最为强大也是最荣耀的职业——魂师!当唐门暗器来到斗罗大陆，当唐三武魂觉醒，他能否在这片武魂的世界再铸唐门的辉煌？他能否成为这个世界的主宰：神?
                                </p>
                                <p class="other">
                                    唐家三少
                                    <span>·完结</span>
                                    <span>·299万字</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/shoucang03.jpg" class="book" alt="剑道邪尊">
                            <div class="content">
                                <h4 class="title">剑道邪尊</h4>
                                <p class="intro">
                                    血精蕴剑意，日月养剑魂。天地凝剑魄，浩宇证剑尊。少年周衍，得大帝邪魂传承，衍化形意十二形终极神兽剑魂，一剑出而天下惊!---首发创世，12万高订传统玄幻，值得一看~
                                </p>
                                <p class="other">
                                    残剑
                                    <span>·完结</span>
                                    <span>·502万字</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/shoucang04.jpg" class="book" alt="一念永恒">
                            <div class="content">
                                <h4 class="title">一念永恒</h4>
                                <p class="intro">
                                    一念成沧海，一念化桑田。一念斩千魔，一念诛万仙。唯我念……永恒这是耳根继《仙逆》《求魔》《我欲封天》后，创作的第四部长篇小说《一念永恒》
                                </p>
                                <p class="other">
                                    耳根
                                    <span>·完结</span>
                                    <span>·396万字</span>
                                </p>
                            </div>
                        </a>
                    </div>

                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/shoucang05.jpg" class="book" alt="斗破苍穹">
                            <div class="content">
                                <h4 class="title">斗破苍穹</h4>
                                <p class="intro">
                                    这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气！新书等级制度：斗者，斗师，大斗师，斗灵，斗王，斗皇，斗宗，斗尊，斗圣，斗帝。……斗破苍穹年番动画，每周日10:00正在腾讯视频火热播出，VIP抢先看2集；于深渊涅槃，收陨落心炎！斗破官方首套盲盒上市！更有惊喜隐藏款等你入手！
                                <p class="other">
                                    天蚕土豆
                                    <span>·完结</span>
                                    <span>·532万字</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/shoucang06.jpg" class="book" alt="绝代神主">
                            <div class="content">
                                <h4 class="title">绝代神主</h4>
                                <p class="intro">
                                    苏家少主苏莫，觉醒出逆天武魂，却被认为是最低级的垃圾武魂，受尽屈辱……且看苏莫如何凭借着逆天武魂，一路崛起，一路逆袭……
                                </p>
                                <p class="other">
                                    百里龙虾
                                    <span>·连载</span>
                                    <span>·826万字</span>
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- 畅销 -->
                <div class="con-m">
                    <!-- 书本 -->
                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/changxiao01.jpg" class="book" alt="镇守锁妖塔万年，却当我工具人？">
                            <div class="content">
                                <h4 class="title">镇守锁妖塔万年，却当我工具人？</h4>
                                <p class="intro">
                                    镇妖宗封禁绝世群妖八万年之久，逐渐被世人遗忘。秦恒接替成为镇妖宗新一代宗主，为了维持大阵运转，殚心竭虑。好不容易弄出一些牛妖粪便填补开支，妖尊粪便的神奇疗效，却引来众门派势力窥觊逼宫，威胁拷问。在炼魂幡中受尽折磨后，意识终于崩溃，重生回了宗门覆灭那天。好好好！宗门默默镇守八万年，竟然被这么对待。那我也不伺候了，直接和这些绝世群妖为伍，站在人类对立面岂不痛快？黑煞星牛妖尊：“大哥，这些人不禁打啊。”雷耀圣虎妖尊：“大王，我觉得这护城大阵比鸡蛋壳还脆。”当那些圣地、皇朝生灵涂炭，祈求镇妖宗出手，把这些妖魔再度封禁之时。秦恒：“以前我没得选，现在我想当一个恶人。”
                                </p>
                                <p class="other">
                                    长风破万浪
                                    <span>·连载</span>
                                    <span>·14.5万字</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/nanbook01.jpg" class="book" alt="万古神帝">
                            <div class="content">
                                <h4 class="title">万古神帝</h4>
                                <p class="intro">
                                    天地初开，太古混乱。灵长之战后，时空人祖、九巫、始佛、幽冥、大魔神相继出世，开创道法，威临八方，众生朝迎，世人尊为始祖。天尊无敌当世，始祖名传古今。但，皆不可得长生………………张若尘自逆境中崛起，从平凡中非凡，在这一条满是英才、妖魔、美人的长生路上，走出一个崭新的大世。
                                </p>
                                <p class="other">
                                    飞天鱼
                                    <span>·连载</span>
                                    <span>·1442万字</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/changxiao03.jpg" class="book" alt="遮天">
                            <div class="content">
                                <h4 class="title">遮天</h4>
                                <p class="intro">
                                    遮天动画，每周三10:00腾讯视频火热播出，VIP抢先看两集；叶凡、女帝、无始等将以立体的形式和你相见，等你一起来看。冰冷与黑暗并存的宇宙深处，九具庞大的龙尸拉着一口青铜古棺，亘古长存。这是太空探测器在枯寂的宇宙中捕捉到的一幅极其震撼的画面。九龙拉棺，究竟是回到了上古，还是来到了星空的彼岸？一个浩大的仙侠世界，光怪陆离，神秘无尽。热血似火山沸腾，激情若瀚海汹涌，欲望如深渊无止境……登天路，踏歌行，弹指遮天。
                                </p>
                                <p class="other">
                                    辰东
                                    <span>·完结</span>
                                    <span>·635万字</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/changxiao04.jpg" class="book" alt="灵境行者">
                            <div class="content">
                                <h4 class="title">灵境行者</h4>
                                <p class="intro">
                                    亘古通今，传闻世有灵境。关于灵境的说法，历朝历代的名人雅士众说纷纭，诗中记载：“自齐至唐，兹山濅荒，灵境寂寥，罕有人游。”“灵境不可状，鬼工谅难求。”
                                </p>
                                <p class="other">
                                    卖报小郎君
                                    <span>·完结</span>
                                    <span>·418万字</span>
                                </p>
                            </div>
                        </a>
                    </div>

                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/changxiao05.jpg" class="book" alt="光阴之外">
                            <div class="content">
                                <h4 class="title">光阴之外</h4>
                                <p class="intro">
                                    天地是万物众生的客舍，光阴是古往今来的过客。死生的差异，就好像梦与醒的不同，纷纭变换，不可究诘。那么超越了生死，超脱了天地，在光阴之外，等待我们的是什么？这是耳根继《仙逆》《求魔》《我欲封天》《一念永恒》《三寸人间》后，创作的第六部长篇小说《光阴之外》
                                <p class="other">
                                    耳根
                                    <span>·连载</span>
                                    <span>·380万字</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="rank-book">
                        <a href="#">
                            <img src="./img/nanbook02.jpg" class="book" alt="万古神帝">
                            <div class="content">
                                <h4 class="title">赤心巡天</h4>
                                <p class="intro">
                                    （《赤心巡天》实体书已在全网发售。）上古时代，妖族绝迹。近古时代，龙族消失。神道大昌的时代已经如烟，飞剑绝巅的时代终究沉沦……这个世界发生了什么？那埋葬于时间长河里的历史真相，谁来聆听？山河千里写伏尸，乾坤百年描饿虎。天地至公如无情，我有赤心一颗、以巡天！——————欢迎来到，情何以甚的仙侠世界。
                                </p>
                                <p class="other">
                                    情何以甚
                                    <span>·连载</span>
                                    <span>·822万字</span>
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- 更新 -->
                <div class="con-m">
                    <!-- 书本 -->
                   <img src="./img/gengxin.jpg" width="100%" alt="" style="margin-top: 36px;">
                    
                </div>
            </div>
        </div>
    </div>

    <!-- 返回顶部模块 -->
    <div class="backtop">
        <img src="./img/tubiao.png" height="100%" width="100%" alt="">
    </div>
    <!-- 脚部模块 -->
    <footer>
        <div class="footer-l">
            <img src="./img/logo.png" width="120px" alt="">
            <p class="copyright" data-v-c28a83fa="">
                Copyright (C) 2024 book.qq.com All Rights Reserved 上海阅文信息技术有限公司 版权所有
            </p>
            <a href="#" class="download">下载APP</a>
        </div>
        <div class="footer-r">
            <dl>
                <dt>关于QQ阅读</dt>
                <dd><a href="#">关于腾讯</a></dd>
                <dd><a href="#">About Tencent</a></dd>
                <dd><a href="#">服务协议</a></dd>
                <dd><a href="#">客户服务</a></dd>
                <dd><a href="#">帮助</a></dd>
            </dl>
            <dl>
                <dt>更多信息</dt>
                <dd><a href="#"> 开放平台</a></dd>
                <dd><a href="#">违规举报</a></dd>
                 <dd><a href="#">起点中文网</a></dd>
                <dd><a href="#">潇湘书院</a></dd>
                <dd><a href= "#">红袖添香</a></dd>
            </dl>
            <dl>
                <dt>登录/注册</dt>
                <dd><a href="login.html">登录</a></dd>
                <dd><a href="register.html">注册</a></dd>
            </dl>
            
        </div>
    </footer>

    <!-- js -->
    <script src="./js/main.js"></script>
    <script>
        // tab选项卡切换
        // 获取元素
        var tab1 = document.querySelectorAll('.tab-gender-i')
        var div1 = document.querySelectorAll('.tab-gender-m')
        // 左边切换
        tab1.forEach((item,index) => {
            item.addEventListener('click',function(){
                // 消除和加样式
                document.querySelector('.tab-gender-i.active').classList.remove('active')
                item.classList.add('active')
                // 显示隐藏模块
                document.querySelector('.tab-gender-m.active').classList.remove('active')
                div1[index].classList.add('active')
            })  
        });
        // 书本内容选项卡切换
        var tab2 = document.querySelectorAll('.con-t a')
        var div2 = document.querySelectorAll('.con-m')
        tab2.forEach((item,index) => {
            item.addEventListener('click',function(){
                // 消除和加样式
                document.querySelector('.con-t a.active').classList.remove('active')
                item.classList.add('active')
                // 显示隐藏模块
                document.querySelector('.con-m.active').classList.remove('active')
                div2[index].classList.add('active')
            })  
        });
    </script>
</body>
</html>